
@import (reference) '~styles/mixins.less';

@r: 120rpx;

.mb10{
  margin-bottom: 10px;
}

page{
  width: 100%;
  height: 100%;
}

.whole-container{
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}


.find-container{
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}





.map{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 723rpx;
  position: relative;

  .icon-container{
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 84.5px;
    width: 39.5px;
    overflow: visible;
    
    .icon{
      .wii-center-flex;
      width: 37.5px;
      height: 38.5px;
      border-radius: 2.5px;
      border: 1rpx solid rgba(210, 210, 210, 0.8);
      background-color: rgba(255,255, 255, 0.8);

      .gps,
      .personal-center{
        width: 23px;
        height: 23px;
      }
    }
    
    .icon:first-child{
      margin-bottom: 7.5px;
    }
  }

}


.specific-container{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 232px;
  flex: 0 0 232px;
  width: 100%;
  background-color: #fff;
  box-shadow: -3px -2px 2px 0 rgba(0, 0, 0, 0.07);
  
  .swiper-container{
    box-sizing: border-box;
    height: 185px;
    padding: 25px 15px  0 15px;
    position: relative;
    swiper{
      position: relative;
      width:100%;
      height:100%;
      .swiper-item{
        display: flex;
        flex-direction: column;
        width: 100%;
        .title-container{
            width: 100%;
          display: flex;
          flex-direction: row;
          // justify-content: space-between;
          align-items:center;
          margin-bottom: 20px;
          .p-title-container {
            flex: 1;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items:center;
            width: 100%;
          }
          image {
            width: 23px;
            height: 20px;
            margin-right: 8px;
          }
  
          .icon-more{
            flex: 0 0 8px;
            width: 8px;
            height: 14px;
          }
          .title{
              display: block;
              width: 85%;
          }
          .page{
              display: block;
              width: 15%;
              text-align: right;
          }
          .title, .page{
            font-size: 20px;
            font-weight: 600;
            line-height: 1;
            color: #4a4a4a;
            overflow: hidden;
            white-space: nowrap;
            text-overflow:ellipsis;
          }
          .page {
            font-size: 13px;
            .totalPage {
              color: #9b9b9b;
            }
          }
        }
        
        .tags{
          display: flex;
          flex-direction: row;
         // align-items: center;
          flex-wrap: wrap;
          height: 25px;
          overflow: hidden;
          position: relative;
          margin-bottom: 20px;
          
          
          .tag{
            .wii-center-flex;
            // width: 63px;
            // flex: 0 0 63px;
            height: 26px;
            box-sizing: border-box;
            padding: 6px 8px;
            font-size: 13px;
            font-weight: 300;
            line-height: 1;
            border-radius: 2.5px;
            margin-right: 5px;
            /*margin-bottom: 5px;*/
            border: 1rpx solid rgba(204, 204, 204, 0.6);
            color: #4a4a4a;
          }
          .tag:last-child{
            margin-right: 0;
          }
          // .tag:nth-child(5){
          //   margin-right: 0;
          // }

          .tag-green{
            border-color: #abe0cf;
            color: #3fc298;
          }

          .pick-up-container{
            display: inline-block;
            position: absolute;
            width: 25px;
            height: 25px;
            top:0px;
            right:-1px;
          }
          .pick-up{
            width: 25px;
            height: 25px;
            flex: 0 0 25px;
          }
        
        }
       
        .box-container{
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-top: 12px;
          &.box-container-height{
            height: 120px;
            box-sizing:border-box;
            padding:18px 0 38px;
            display: block;
            .text{
                line-height: 22px;
                font-size: 14px;
                color: #c2c2c2;
            }
        }
          .box-toilet__container{
            display: flex;
            flex-direction: row;
            align-items: center;
            // margin-right: 25px;
            width: 160px;
          }
          .box-toilet__container:last-child{
            margin-right: 0;
          }

          .box-container__type{
            font-size: 13px;
            font-weight: 300;
            color: #9b9b9b;
            margin-right: 10px;
          }

          .p-box-container__content {
            margin-right: 15px;
          }
          .box-container__content{
            display: flex;
            flex-direction: row;
            .item{
              display: flex;
              flex-direction: row;
              align-items: center;
              margin-right: 30px;
              .icon-img{
                width: 16px;
                height: 19px;
                margin-right: 5px;
              }
              .icon-text{
                color: #3d3d3d;
                font-weight: 300;
                font-size: 14px;
                margin-right: 5px;
              }
              .num{
                font-size: 14px;
                line-height: 1;
                color: #28b1cd;
              }
            }

            .toilet-level{
              font-size: 13px;
            }
            .level1{
              color: #13ac55;
            }
            .level2{
              color: #FF7812;
            }
            .level3{
              color: #FC3824;
            }
            .tip-info{
              font-size: 13px;
              /*color: rgba(204, 204, 204, 0.6);*/
              color: #4a4a4a;
            }
            .toilet-num{
              font-size: 13px;
              font-weight: 300;
              line-height: 1;
              color: #3d3d3d;
            }
          }
        }

        .mt10{
          margin-top: 0;
        }
      }
    }

    .swiper-btn-wrapper{
      position: absolute;
      left: 0;
      bottom: 19px;
      z-index: 20;
      width: 100%;
      text-align: center;
      height: 17rpx;
      line-height: 17rpx;
      .swiper-btn-list{
        border-radius: 10px;
        padding: 0 5px;
        display: inline-block;
        view{
          width: 6px;
          height: 6px;
          float: left;
          background-color: #ededed;
          border-radius: 3px;
          margin-right: 15px;
        }
        view.on {
          background-color: #c1c1c1;
        }
      }
    }
  }

  .go-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    margin-top: 2px;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    .go-tips{
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 13px;
      font-weight: 300;
      color: #232323;
      background-color: #fff;
      padding-left: 15px;
      height: 48px;
      border-top: 1rpx solid rgba(189, 189, 189, 0.3);
      width: 100%;
      .go-img{
        width: 11px;
        height: 19px;
        margin-right: 5px;
      }
    }
    .go-btn{
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 116px;
      height: 49px;
      background-color: #28b1cd;
      font-size: 18px;
      text-align: center;
      color: #fff;
    }
  }
}

.mask{
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}
.popup-container{
  width: 275px;
  height: 230px;
  overflow: hidden;
  border-radius: 3px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .logo{
    width: 66px;
    height: 54px;
    margin: 21px 0 13px 0;
    flex: 0 0 54px;

    background-image: url('http://app-1254950508.file.myqcloud.com/wx19c89d9b0ffb9a6f.o6zAJs4RQAEb7Ma2GmlJp-oCNfIw.dfaa34dfc6e8855f4ddd3d6b6c02290f.png');
    -webkit-animation: auto-circle 1.2s step-end infinite;
    background-size: cover;
    background-repeat: repeat-x;
    // background-position-x: -32px; 
  }

  @-webkit-keyframes auto-circle{
    0%{
      background-position-x: -32px;                                   
    }
    10%{
      background-position-x: 99px;
    }
    20%{
      background-position-x: 228px;
    }
    30%{
      background-position-x: 357px;
    }
    40%{
      background-position-x: 486px;
    }
    50%{
      background-position-x: 615px;
    }
    60%{
      background-position-x: 744px;
    }
    70%{
      background-position-x: 873px;
    }
    80%{
      background-position-x: 1002px;
    }
    90%{
      background-position-x: 1131px;
    }
    100%{
      background-position-x: 1262px;
    }
  }
  .title{
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 17px;
  }
  .sub-title{
    font-size: 14px;
    font-weight: 300;
    color: #000000;

  }
  .btn{
    margin-top: 21px;
    .wii-center-flex;
    width: 100%;
    flex:0 0 48px;
    height: 48px;
    font-size: 16px;
    line-height: 1;
    color: #1abed5;
    border-top: solid 1rpx rgba(189,189,189, 0.3);
  }
}










